<!--骑手管理-骑手列表-->
<template>
  <div class="video-list-manage-parent" ref="parentContainer">
    <!--操作表单区域-->
    <div class="option-parent" ref="optionParentContainer">
      <el-row :gutter="0">
        <el-col :span="6">
          <el-input v-model="ridername" placeholder="骑手姓名"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="ridermobile" placeholder="骑手手机号"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="queryArticleByBtn()">查询</el-button>
          <el-button type="success" @click="openPage()">新增</el-button>
        </el-col>
      </el-row>
    </div>

    <!--数据表格区域-->
    <div v-bind:style="{height:tableHeight+'px',width:'100%'}" v-loading="loading">
      <el-table :data="riderData.agent_rider_list" border width="100%" height="100%">
        <el-table-column
          fixed
          label="添加时间"
          min-width="150">
          <template slot-scope="scope">
            <p>{{genTime(scope.row.dt0)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="areaname"
          label="分区"
          min-width="60">
        </el-table-column>
        <el-table-column
          prop="ridername"
          label="姓名"
          min-width="60">
        </el-table-column>
        <el-table-column
          prop="ridermobile"
          label="手机号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="deliver_day_night"
          label="班期"
          min-width="60">
          <template slot-scope="scope">
            <p>{{genDayNight(scope.row.deliver_day_night)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="evaluate_count"
          label="评价数量"
          min-width="60">
        </el-table-column>
        <el-table-column
          prop="evaluate_average_score"
          label="评价得分"
          min-width="60">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
            <el-button
              v-show="riderState(scope.row.rider_state)"
              size="mini"
              type="danger"
              @click="lockRider(scope.row)">锁定
            </el-button>
            <el-button
              v-show="!riderState(scope.row.rider_state)"
              size="mini"
              type="danger"
              @click="unlockRider(scope.row)">解锁
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--翻页区域-->
    <div class="pagination-parent" ref="paginationParentContainer">
      <el-pagination
        class="pagination-body"
        @current-change="handleCurrentChange"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="riderData.rowcount">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import CPageBase from "../fragment/CPageBase"
  import CRootBase from "../fragment/CRootBase"

  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/container/rider_list", name: "骑手列表"},
        ],
        start: 1,
        limit: 10,
        ridername: "",
        ridermobile: "",
        riderData: "",
        loading: false,
      }
    },
    mixins: [CPageBase, CRootBase],
    components: {},
    mounted() {

    },
    activated() {
      this.initCurrentPath();
      this.requestArticleData();
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      //截取时间
      genTime(time) {
        return time.substring(0, time.length - 2);
      },

      //转换白班夜班
      genDayNight(dayNight) {
        if (dayNight === "0") {
          return "白班";
        } else {
          return "夜班";
        }
      },

      //骑手状态
      riderState(rider_tate) {
        if (rider_tate === "0") {
          return true;
        } else if (rider_tate === "1") {
          return false;
        }
      },

      //打开新增页面
      openPage() {
        this.$router.push("rider_add");
      },

      //打开编辑页
      handleEdit(item) {
        this.$router.push({path: 'rider_add', query: item});
      },

      //处理翻页改变事件
      handleCurrentChange(currentPage) {
        this.start = this.start + this.limit;
        this.requestVideoInfos();
      },

      //点击查询按钮
      queryArticleByBtn() {
        this.start = 1;
        this.limit = 10;
        this.requestArticleData();
      },

      //获取骑手列表
      requestArticleData() {
        let that = this;
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_rider_list");
        parameter.append("ridermobile", this.ridermobile);
        parameter.append("ridername", this.ridername);
        parameter.append("pageno", this.start);
        parameter.append("pagesize", this.limit);
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.riderData = data;
        });
      },

      // 获取分类列表
      requestCategoryData() {
        let parameter = new URLSearchParams();
        let that = this;
        this.$http.requestData(that, "/article_category/query_list", parameter, function (data) {
          that.categoryData = data;
        });
      },

      //删除提示框
      handleDelete(item) {
        let that = this;
        this.$confirm('确认要删除该骑手吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.confireDelete(item);
        }).catch(() => {
        });
      },

      //确认删除
      confireDelete(item) {
        let that = this;
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_rider_delete");
        parameter.append("riderid", item.riderid);
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message("删除成功!");
          that.requestArticleData();
        });
      },

      //锁定骑手
      lockRider(item) {
        let that = this;
        this.$confirm('确认要锁定该骑手吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new URLSearchParams();
          parameter.append("action", "agent_rider_lock");
          parameter.append("riderid", item.riderid);
          that.loading = true;
          that.$http.requestAuthData(that, parameter, function (data) {
            that.$message("锁定成功!");
            that.requestArticleData();
          });
        }).catch(() => {
        });
      },

      //解锁骑手
      unlockRider(item) {
        let that = this;
        this.$confirm('确认要解锁该骑手吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new URLSearchParams();
          parameter.append("action", "agent_rider_unlock");
          parameter.append("riderid", item.riderid);
          that.loading = true;
          that.$http.requestAuthData(that, parameter, function (data) {
            that.$message("解锁成功!");
            that.requestArticleData();
          });
        }).catch(() => {
        });
      }
    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/list-type-pages.scss">
</style>

